<div ng-init="vm.init()">
  <h3 class="page-header">财物列表</h3>
  <div class="panel panel-default" ng-init="isOpen = true">
    <div class="panel-heading">
      <i class="glyphicon glyphicon-search"></i> 搜索条件
      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default btn-xs" ng-click="isOpen = !isOpen">
          <i class="glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
        </button>
      </div>
    </div>
    <div class="panel-collapse collapse" ng-class="{'in': isOpen, '': !isOpen}">
      <div class="panel-body">
        <form class="form-inline">
          <div class="form-group">
            <label class="control-label">财物名称</label>
            <input class="form-control" ng-model="vm.propertyName">
          </div>
          <div class="form-group">
            <label class="control-label">财物分类</label>
            <select class="form-control" ng-model="vm.categoryId"
                ng-options="x.id as x.name group by x.parentName for x in vm.category">
              <option value=""></option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label">购买日期</label>
            <div class="input-group date" ng-datepicker="buyDateFrom"
                ng-datepicker-options="{endDate:'new Date()',endDateId:'buyDateTo'}">
              <input type="text" readonly class="form-control" ng-model="vm.buyDateFrom">
              <div class="input-group-addon">
                <span class="glyphicon glyphicon-th"></span>
              </div>
            </div>
            ~
            <div class="input-group date" ng-datepicker="buyDateTo"
                ng-datepicker-options="{endDate:'new Date()',startDateId:'buyDateFrom'}">
              <input type="text" readonly class="form-control" ng-model="vm.buyDateTo">
              <div class="input-group-addon">
                <span class="glyphicon glyphicon-th"></span>
              </div>
            </div>
          </div>
          <button type="button" class="btn btn-primary" ng-click="vm.search(true)">
              <i class="glyphicon glyphicon-search"></i> 搜 索</button>
          <button type="reset" class="btn btn-warning" ng-click="vm.reset()">
              <i class="glyphicon glyphicon-repeat"></i> 重置</button>
        </form>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <i class="glyphicon glyphicon-th-list"></i> 搜索结果
      <div class="pull-right">
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">隐藏列
              <span class="caret"></span></button>
          <ul class="dropdown-menu pull-right">
            <li ng-repeat="column in vm.columns" style="padding-left: 30px">
              <label class="checkbox" ng-if="['', '财物名称', '价格', '操作'].indexOf(column.title()) < 0">
                <input type="checkbox" ng-model-options="{getterSetter: true}" ng-model="column.show"/>{{column.title()}}
              </label>
            </li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">视图
              <span class="caret"></span></button>
          <ul class="dropdown-menu pull-right">
            <li ng-class="{'active': vm.showTable}">
                <a href="javascript:void(0)" ng-click="vm.showResult(true, true)">列表</a></li>
            <li ng-class="{'active': !vm.showTable}">
                <a href="javascript:void(0)" ng-click="vm.showResult(true, false)">图表</a></li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">操作
              <span class="caret"></span></button>
          <ul class="dropdown-menu pull-right">
            <li><a href="javascript:void(0)" ng-click="vm.edit()">添加</a></li>
            <li><a href="javascript:void(0)" ng-click="vm.remove()">删除</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel-body" style="overflow: auto">
      <div ng-show="vm.showTable" style="min-width: 1024px; margin: 0 -15px">
        <div style="padding: 0 15px">
          <table class="table table-bordered table-striped" ng-table="vm.tableParams" ng-table-columns-binding="vm.columns">
            <colgroup>
              <col width="5%">
            </colgroup>
            <tr ng-repeat="property in $data">
              <td selector="'item'" key="['id']" data="property"></td>
              <td data-title="'财物名称'" ng-if="true">{{property.name}}</td>
              <td data-title="'分类名称'" ng-if="true">{{property.categoryName}}</td>
              <td data-title="'价格'" sortable="'price'" class="text-right" ng-if="true">{{property.price | number:2}}</td>
              <td data-title="'购买日期'" sortable="'buy_date'" class="text-center" ng-if="true">
                {{property.buyDate | date:'yyyy-MM-dd'}}
              </td>
              <td data-title="'财物描述'" ng-if="true">{{property.description}}</td>
              <td data-title="'更新时间'" sortable="'update_time'" class="text-center" ng-if="true">
                {{property.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}
              </td>
              <td data-title="'更新人'" ng-if="true">{{property.updateBy}}</td>
              <td data-title="'操作'" class="text-center" ng-if="true">
                <button type="button" class="btn btn-success btn-xs" uib-tooltip="预览" ng-click="vm.preview(property)">
                  <i class="glyphicon glyphicon-eye-open"></i></button>
                <button type="button" class="btn btn-primary btn-xs" uib-tooltip="修改" ng-click="vm.edit(property)">
                  <i class="glyphicon glyphicon-pencil"></i></button>
                <button type="button" class="btn btn-danger btn-xs" uib-tooltip="删除" ng-click="vm.remove(property)">
                  <i class="glyphicon glyphicon-trash"></i></button>
              </td>
            </tr>
            <tr class="warning" ng-show="$data.length == 0">
              <td colspan="9" class="text-center">没有数据</td>
            </tr>
          </table>
        </div>
      </div>
      <div ng-show="!vm.showTable">
        <div class="container-fluid preview">
          <div class="row">
            <div class="col-sm-4 col-md-3" ng-repeat="item in vm.properties">
              <div class="thumbnail">
                <a href="javascript:void(0)" ng-click="vm.preview(item)">
                  <img alt="Loading..." ng-src="{{vm.imageBaseUrl}}{{item.imageUrl}}">
                </a>
                <div class="caption">
                  <h3>{{item.name}}</h3>
                  <p>
                    <label>价格：{{item.price | number: 1}}</label>
                    <br>
                    <label>购买时间：{{item.buyDate | date:'yyyy-MM-dd'}}</label>
                  </p>
                  <p>
                    <button class="btn btn-primary btn-xs" uib-tooltip="修改" ng-click="vm.edit(item)">
                        <i class="glyphicon glyphicon-pencil"></i></button>
                    <button class="btn btn-danger btn-xs" uib-tooltip="删除" ng-click="vm.remove(item)">
                        <i class="glyphicon glyphicon-trash"></i></button>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <button ng-disabled="vm.allLoaded" class="btn btn-primary btn-block" ng-click="vm.load()">加载更多的财物...</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
